<div class="devui-demo-container" style="padding-left: 4px" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div [dAnchor]="'basic-usage'" class="devui-demo-example">
    <div class="devui-demo-title">{{ 'components.accordion.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.accordion.basicDemo.description' | translate }}
    </div>
    <d-codebox id="accordion-demo-basic" [sourceData]="AccordionDemoBasic">
      <d-basic demo></d-basic>
    </d-codebox>
  </div>
  <div [dAnchor]="'use-built-in-routing-and-link-types'" class="devui-demo-example">
    <div class="devui-demo-title">{{ 'components.accordion.linkDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.accordion.linkDemo.description' | translate }}
    </div>
    <d-codebox id="accordion-demo-link" [sourceData]="AccordionDemolink">
      <d-link demo></d-link>
    </d-codebox>
  </div>
  <div [dAnchor]="'using-templates'" class="devui-demo-example">
    <div class="devui-demo-title">{{ 'components.accordion.templateDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.accordion.templateDemo.description' | translate }}</div>
    <d-codebox id="accordion-demo-template" [sourceData]="AccordionDemoTemplate">
      <d-template demo></d-template>
    </d-codebox>
    <div class="devui-demo-text" style="margin-top: 20px">{{ 'components.accordion.innerListTemplateDemo.description' | translate }}</div>
    <d-codebox id="accordion-demo-inner-list-template" [sourceData]="AccordionDemoInnerListTemplate">
      <d-inner-list-template demo></d-inner-list-template>
    </d-codebox>
  </div>

  <div [dAnchor]="'compound-level-and-auto-expand'" class="devui-demo-example">
    <div class="devui-demo-title">{{ 'components.accordion.multiLevelDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.accordion.multiLevelDemo.description' | translate }}</div>
    <d-codebox id="accordion-demo-multi-level" [sourceData]="AccordionDemoMultiLevel">
      <d-multi-level demo></d-multi-level>
    </d-codebox>
  </div>
  <div [dAnchor]="'change-values'" class="devui-demo-example">
    <div class="devui-demo-title">{{ 'components.accordion.changeKeyDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.accordion.changeKeyDemo.description' | translate }}</div>
    <d-codebox d="accordion-demo-change-key" [sourceData]="AccordionDemoChangeKey">
      <d-change-key demo></d-change-key>
    </d-codebox>
  </div>
</div>
